<template lang="html">
	<div class="category-box">
		<div class="category-block" v-for="(item,index) in categoryDate">
			<div class="category-title">
				<h3 
				:style="'border-left: 0.2rem solid #'+item.category_detail.category_color +';color:#'+item.category_detail.category_color"
				>
					{{ item.category_detail.name }}
					<span>
						更多
						<i class="iconfont icon-xiangyou"></i>
					</span>
				</h3>
			</div>
			<img :src="item.activity.img" alt="">
			<ul>
				<li v-for="(ele,index) in item.category_detail.goods" :key="index">
					<router-link 
						tag="div" 
						to="/details">
						<img  @click="addClick(ele)" :src="ele.img" alt="">
					</router-link>
					<p class="goods-name">{{ ele.name }}</p>
					<div class="product-promotion">
						&nbsp;
					</div>
					<div class="buy-goods">
						<div class="goods-num">
							<p>{{ ele.specifics }}</p>
							<span>￥ {{ ele.price }}</span>
						</div>
						<div class="add-btn" @click="addCart(ele)">
							<i class="iconfont icon-jia"></i>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { mapActions } from "vuex"

	export default{
		name: "CategoryBlock",
		data(){
			return{
				
			}
		},
		props:{
			categoryDate:{
				type:Array,
				default:function(){
					return[]
				}
			}
		},
		methods:{
		    ...mapActions(['good/setGood','cart/addProductToCart']),
		    addClick(data){
		      this["good/setGood"](data);
		      // this.$store.dispatch("getGood",data)
		    },
		    addCart(obj){
		    	this['cart/addProductToCart'](obj);
		    }
		}
	}
</script>

<style lang="less" scoped>
.category-block{
	background: #fff;
	padding: 0 0.2rem;
	padding-bottom: 0.2rem ;
	margin-bottom: 0.2rem;
	.category-title{
		width: 100%;
		padding: 0.2rem 0;
		h3{
			padding-left: 0.1rem;
			span{
				float: right;
				color:#999;
				i{
					font-size: 0.3rem;
				}
			}
		}
	}
	img{
		width: 100%;
	}
	ul{
		width: 100%;
		overflow: hidden;
		li:nth-child(2){
			border-left: 1px solid #999;
			border-right: 1px solid #999;
		}
		li{
			width: 33.33%;
			float: left;
			padding: 0 0.1rem;
			position: relative;
			.flyDiv{
				position: absolute;
				top: 0;
				left: 10%;
				opacity: 0;
				width: 80%;
				img{
					width: 100%;
				}
			}
			img{
				width: 100%;
			}
			.product-promotion{
				min-height: 0.4rem;
			}
			.goods-name{
				width: 100%;
				overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
			}
			.buy-goods{
				.goods-num{
					float: left;
					p{
						color:#999;
						margin: 0.1rem 0;
						font-size: 0.28rem;
					}
					span{
						color:red;
						margin: 0.1rem 0;
					}
				}
				.add-btn{
					width: 0.66rem;
					height: 0.66rem;
					line-height: 0.66rem;
					border-radius: 50%;
					border: 1px solid #999;
					color: red;
					text-align: center;
					float: right;
					i{
						font-size: 0.4rem;
						font-weight: 700;
					}
				}
			}
		}
	}
}

</style>